<template>
  <div class="tabbar">
    <h1 class="nav-title">考试结果</h1>
  </div>
  <div style="" class="content-box">
    <el-row class="field">
      <el-col :span="8" class="title">公司名称：</el-col>
      <el-col :span="16" class="content">{{ examInfo?.companyName }}</el-col>
    </el-row>
    <el-row class="field">
      <el-col :span="8" class="title">姓名：</el-col>
      <el-col :span="16" class="content">{{ examInfo?.staffName }}</el-col>
    </el-row>
    <el-row class="field">
      <el-col :span="8" class="title">电话：</el-col>
      <el-col :span="16" class="content">{{ examInfo?.phone }}</el-col>
    </el-row>
    <el-row class="field">
      <el-col :span="8" class="title">用时：</el-col>
      <el-col :span="16" class="content">{{
        `${examTimeCost && Math.floor(examTimeCost / 60)}分钟${examTimeCost && examTimeCost % 60}秒`
      }}</el-col>
    </el-row>
    <el-row class="field">
      <el-col :span="8" class="title">交卷时间：</el-col>
      <el-col :span="16" class="content">{{ `${examInfo?.endTime}` }}</el-col>
    </el-row>
    <el-row class="field">
      <el-col :span="8" class="title">得分：</el-col>
      <el-col :span="16" class="content">{{ `${examInfo?.userScore}` }}</el-col>
    </el-row>
    <el-row class="field">
      <el-col :span="8" class="title">是否通过：</el-col>
      <el-col :span="16" class="content">{{
        `${examInfo?.pass == 0 ? "考试通过" : "考试不通过"}`
      }}</el-col>
    </el-row>
    <template v-for="questionItem of questionList">
      <el-row class="field">
        <el-col :span="8" class="question-type">{{
          questionItem.type
        }}</el-col>
      </el-row>
      <template v-for="item of questionItem.items">
        <el-row class="field">
          <span style="margin-right: 20px" :class="item.userOptions === item.answer ? 'correct' : 'incorrect'">
            {{ item.question }}</span>
          <div>
            <span>您的答案:</span>
            <span class="user-answer"> {{ item.userAnswer }}</span>
            <span>正确答案: </span>
            <span class="right-answer">{{ `${item.answer}` }}</span>
          </div>
        </el-row>
        <el-row v-for="answerItem of item.answerList" class="field">{{
          `${answerItem.value}: ${answerItem.label}`
        }}</el-row>
      </template>
    </template>
  </div>
</template>

<script setup lang="ts">
import AccountApi from "~/src/api/AccountApi";
import DrillExamRecordApi from "~/src/api/DrillExamRecordApi";

const questionList = ref<any[]>([]);
const examInfo = ref();
const examTimeCost = computed(() => {
  if (examInfo.value && examInfo.value.startTime && examInfo.value.endTime) {
    return (Math.floor((new Date(examInfo.value.endTime).getHours() - new Date(examInfo.value.startTime).getHours()) * 60) + new Date(examInfo.value.endTime).getMinutes() - new Date(examInfo.value.startTime).getMinutes()) * 60 + new Date(examInfo.value.endTime).getSeconds() - new Date(examInfo.value.startTime).getSeconds()
  }
  return ""
})


const props = defineProps({
  modelValue: {}
})
onMounted(async () => {
  // 获取最新考试记录
  //   const {data:pageData} = await AccountApi.getExamRecord()
  //   console.log("exam page data",pageData)
  //   const latestRecordId = pageData.records && pageData.records[0].id
  //   const { data } = await AccountApi.getExamDetail({
  //     drillExamRecordId: latestRecordId,
  //   });

  const { data } = await DrillExamRecordApi.getDetail({ drillExamRecordId: props.modelValue.query.drillExamRecordId })
  console.log("exam result data", data);
  examInfo.value = data;
  for (const item of examInfo.value.drillExamRecordDetails) {
    if (["单选题", "多选题", "判断题"].includes(item.subjectType)) {
      const target = questionList.value.find(
        (x) => x.type === item.subjectType
      );
      // 遍历获取题目选项
      const optionsList = [];
      for (const key of Object.keys(item)) {
        if (key !== "" && key.includes("option") && item[key] !== "") {
          const optionValue = key.split("option")[1];
          const optionLabel = item[key];
          optionsList.push({
            value: optionValue,
            label: optionLabel,
          });
        }
      }
      if (!target) {
        questionList.value.push({
          type: item.subjectType,
          items: [
            {
              question: item.subjectContent,
              userAnswer: item.userOptions,
              answer: item.answer,
              answerList: optionsList,
            },
          ],
        });
      } else {
        target.items.push({
          question: item.subjectContent,
          userAnswer: item.userOptions,
          answer: item.answer,
          answerList: optionsList,
        });
      }
    }
  }
});
</script>

<style scoped>
.tabbar {
  display: flex;
  background-color: white;
  height: 60px;
  align-items: center;
}

.back {
  font-size: 35px;
}

.nav-title {
  font-size: 18px;
  margin: 0 auto;
  /* transform: translateX(-15px); */
}

.field {
  line-height: 30px;
  margin: 15px;
  border-bottom: 1px solid #dbdbdb;
  vertical-align: middle;
}

.title {
  font-size: 14px;
}

.content {
  font-size: 17px;
}

.question-type {
  font-size: 17px;
  color: var(--el-color-warning);
}

.content-box {
  overflow: scroll;
  /* height: calc(100% - 60px); */
  height: 600px;
}

.user-answer {
  margin-right: 10px;
  color: var(--el-color-primary);
}

.right-answer {
  color: var(--el-color-success);
}

.correct {
  color: var(--el-color-primary);
  font-size: 15px;
}

.incorrect {
  color: var(--el-color-danger);
  font-size: 15px;
}
</style>
